<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 
      获取元素节点
        - 通过document对象调用
        
        1.getElementById()
          - 通过id属性获取一个元素节点对象
        
        2.getElementsByTagName()
          - 通过标签名获取一组元素节点对象
        
        3.getElementsByName()
          - 通过name属性获取一组元素节点对象

      获取元素节点的子节点
        - 通过具体的元素节点调用
        1.getElementsByTagName()
          - 方法,返回当前节点的指定标签名后代节点
        2.childNodes
          - 属性,表示当前节点的所有子节点
        3.firstChild
          - 属性,表示当前节点的第一个子节点
        4.lastChild
          - 属性,表示当前节点的最后一个子节点

    -->

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #outer {
        width: 500px;
        margin: 50px auto;
        padding: 10px;
        background-color: greenyellow;
        /* 设置文本居中 */
        text-align: center;
      }
    </style>

    <script type="text/javascript">
      window.onload = function () {
        /*
          点击按钮切换图片
        */

        //获取两个按钮
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');

        //获取img标签
        //getElementsByTagName返回数组,即使只有一个元素,也是返回数组
        var img = document.getElementsByTagName('img')[0];

        //创建一个数组,用来保存图片的路径
        var imgArr = [
          'img/1.jpg',
          'img/2.jpg',
          'img/3.jpg',
          'img/4.jpg',
          'img/5.jpg',
        ];

        //创建一个变量,来保存当前正在显示的图片的索引
        var index = 0;

        //分别为两个按钮绑定单击响应函数
        prev.onclick = function () {
          /* 
            切换到上一张,索引自减
          */
          index--;

          if (index < 0) {
            index = 4;
          }

          // alert('上一张');
          img.src = imgArr[index];
        };

        next.onclick = function () {
          /* 
            切换到下一张,索引自增
          */
          index++;
          if (index >= imgArr.length) {
            index = 0;
          }

          // alert('下一张');
          //切换图片就是修改img的src属性
          //要修改一个元素的属性  语法格式: 元素.属性 = 属性值
          img.src = imgArr[index];
        };

        /*
          要切换图片就是要修改img标签的src属性
        */
      };
    </script>
  </head>
  <body>
    <div id="outer">
      <img src="img/1.jpg" alt="冰棍" />

      <button id="prev">上一张</button>
      <button id="next">下一张</button>
    </div>
  </body>
</html>
